<template>
<div class="box">
  <span class="title">{{msg}}</span>
<el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
          <span class="username">{{user.username}}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="toUserInfo">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
</div>

</template>
<script>
export default {
  name: 'headerVue',
  data () {
    return {
      user: JSON.parse(localStorage.getItem('user')),
      msg: localStorage.getItem('court')
    }
  },
  methods: {
    toUserInfo () {
      console.log('去个人中心')
      this.$router.push({ path: '/person' })
    },
    exit () {
      this.$confirm('您确定要退出登录吗？', '提示', {
        // 确认按钮的文字
        confirmButtonText: '确定',
        type: 'warning',
        center: true
      }).then(() => {
        this.$router.replace({ path: '/' })
        localStorage.clear()
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  mounted(){
      this.$bus.$on('court', (data) => {
       this.msg = data
     })
  }
}
</script>
<style scoped>
.title{
  position: absolute;
  right:500px;
  font-size: 34px;
  font:bolder;

}
.el-dropdown{
  margin-top: 20px;
  float: right;
}
</style>
